import './App.css'

// 1.导入路由依赖模块
// 路由懒加载
import { lazy, Suspense } from "react"
import {
  BrowserRouter as Router,    // 路由容器
  Route,                      // 路由规则
  Redirect,                   // 路由重定向
  Switch,                     // 唯一匹配
  NavLink                     // 声明式导航
} from "react-router-dom"

// 2. 导入一级路由组件
import Login from './views/Login' // 首页直接导入
const Reg = lazy(() => import('./views/Reg'))   // 其他页面懒加载导入
const Main = lazy(() => import('./views/Main')) // 其他页面懒加载导入
const NotFound = lazy(() => import('./views/NotFound')) // 其他页面懒加载导入


function App() {

  return (
    <div className="App">
      {/** 3. 配置一级路由 */}
      {/** 类似Vue mode:history 路由匹配模式 */}
      <Router>
        <nav>
          {/* 类似Vue <router-link to="/main">首页</router-link> */}
          <NavLink to="/main">首页</NavLink>
          <NavLink to="/login">登录</NavLink>
          <NavLink to="/reg">注册</NavLink>
        </nav>

        <Suspense fallback="加载中...">
          <Switch>
            {/* 类似封装Vue   <router-view></router-view> */}
            <Route path="/" exact>
              <Redirect to="/login" />
            </Route>
            <Route path="/login" component={Login} />
            <Route path="/reg" component={Reg} />
            <Route path="/main" component={Main} />
            <Route path="*" component={NotFound} />
          </Switch>
        </Suspense>
      </Router>
    </div>
  )
}

export default App
